<template>
    <div class='ListOne'>
        <div class='ListOne-one'>
            <div class='ListOne-one-left'>
                <div class='ListOne-one-left-vidio'></div>
            </div>
            <div class='ListOne-one-right'>
                <h1 class='ListOne-one-right-title'>ABOUT</h1>
                <h2 class='ListOne-one-right-title-h2'>US</h2>
                <div class='ListOne-one-right-bottom'>
                    <h2 class='ListOne-one-right-title-caption'>武汉火柴契网络科技有限公司</h2>
                    <p class='ListOne-one-right-content-one'>公司前身为襄阳师兄电子商务有限公司，办公室地址位于华夏城池、兵家必争之地称号的襄樊，于2014年10月29日在襄阳市工商行政管理局注册成立，注册资本为50万元；在公司发展壮大的5年里，为了给学员提供更好的服务，2019年搬至武汉；我们始终为客户提供好的产品和技术支持、健全的售后服务，我公司主要经营网上商务咨询；网络技术开发、技术培训、技术推广、技术服务。（依法须经批准的项目，经相关部门批准后方可开展经营活动），我们有好的产品和专业的销售和技术团队，我公司属于襄阳信息传输、计算机服务和软件业黄页行业。</p>
                    <p class='ListOne-one-right-content-two'>如果您对我公司的产品服务有兴趣，期待您在线留言或者来电咨询</p>
                    <div class='ListOne-one-right-bottom-button'></div>
                </div>    
            </div>
        </div>
        <div class='ListOne-one-two'>
            <div class='ListOne-one-two-left'>
                <h2 class='ListOne-one-two-title-h1'>TYPES</h2>
                <h2 class='ListOne-one-two-title-h2'>CLASSROOM</h2>
                <h2 class='ListOne-one-two-title-h3'>课堂概览</h2>
                <p class='ListOne-one-two-content'>火柴契教育是在线教育直播平台。集教学管理、在线授课听课、作业考试、互助学习功能于一体支持web、PC、app、h5、小程序等多端同时在线互动直播。涵盖淘宝、天猫、京东、亚马逊、抖音等众多领域</p>
            </div>
            <ul class='ListOne-one-two-right'>
                <li v-for='(item,index) of imgUrl' :key='index+"ListOne-one-two-right"'  >
                    <div class='ListOne-one-two-right-item'>
                        <img class='ListOne-one-two-right-img' :src='item.url' alt="" >
                        <div class='ListOne-one-two-right-content'>
                            <p>{{item.content1}}</p>
                            <p>{{item.content2}}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class='ListOne-one-tre'>
            <div class='ListOne-one-tre-title'>
                <p>CLASS REGISTRATION</p>
                <h2>班级报名</h2>
            </div>
            <ul class='ListOne-one-tre-box'>
                <li class="ListOne-one-tre-box-item" v-for='(item,index) of boxtre' :key='index+"boxtre"'>
                    <h2 class="ListOne-one-tre-box-item-title">{{item.title}}</h2>
                    <p class="ListOne-one-tre-box-item-shouke">授课时间</p>
                    <p class="ListOne-one-tre-box-item-timer">{{item.timer}}</p>
                    <div class="ListOne-one-tre-box-item-shichang"><img src="/static/img/时长.png" width=21 height=21 alt=""><span>时长：</span>{{item.shichang}}</div>
                    <div class="ListOne-one-tre-box-item-renshu"><img src="/static/img/人数.png" width=21 height=21 alt=""><span>人数：</span>{{item.renshu}}</div>
                    <div class="ListOne-one-tre-box-item-finish" v-if = 'item.finished'>已截至</div>
                    <a class="ListOne-one-tre-box-item-begin"  href='https://item.taobao.com/item.htm?spm=2013.1.w4023-21635698638.4.483b32f8EGYkBz&id=600071553476' v-if='!item.finished'>立即报名</a>
                   
                </li>
            </ul>
            <div class='ListOne-one-tre-more'>MORE</div>
        </div>
        <div class='ListOne-one-fou'>
            <ul class='ListOne-one-for-content'>
                <li class="ListOne-one-fou-item">
                    <div class="ListOne-one-fou-item-content">
                        <span class="ListOne-one-fou-item-name">子云</span>
                        <span class="ListOne-one-fou-item-eng">Taobao Operations Director</span>
                        <span class="ListOne-one-fou-item-des">淘宝运营总监</span>
                    </div>
                </li>
                <li class="ListOne-one-fou-item">
                    <p class="ListOne-one-fou-item-te">师者</p>
                    <p class="ListOne-one-fou-item-tx">传道授业解惑也</p>
                </li>
                <li class="ListOne-one-fou-item">
                    <div class="ListOne-one-fou-item-content">
                        <span class="ListOne-one-fou-item-name">江茗</span>
                        <span class="ListOne-one-fou-item-eng">Taobao Operations Director</span>
                        <span class="ListOne-one-fou-item-des">淘宝运营总监</span>
                    </div>
                </li>
                <li class="ListOne-one-fou-item">
                    <div class="ListOne-one-fou-item-content">
                        <span class="ListOne-one-fou-item-name">子沐</span>
                        <span class="ListOne-one-fou-item-eng">Taobao Operations Director</span>
                        <span class="ListOne-one-fou-item-des">淘宝运营总监</span>
                    </div>
                </li>
                <li class="ListOne-one-fou-item">
                    <p class='ListOne-one-fou-item-lest'>TEACHER STRENGTH</p>
                    <p class='ListOne-one-fou-item-dest'>师资力量</p>
                </li>
                <li class="ListOne-one-fou-item">
                    <div class="ListOne-one-fou-item-content">
                        <span class="ListOne-one-fou-item-name">秋秋</span>
                        <span class="ListOne-one-fou-item-eng">Taobao Operations Director</span>
                        <span class="ListOne-one-fou-item-des">淘宝运营总监</span>
                    </div>
                </li>
                <li class="ListOne-one-fou-item">
                    <div class="ListOne-one-fou-item-content">
                        <span class="ListOne-one-fou-item-name">娟娟</span>
                        <span class="ListOne-one-fou-item-eng">Taobao Operations Director</span>
                        <span class="ListOne-one-fou-item-des">淘宝运营总监</span>
                    </div>
                </li>
                <li class="ListOne-one-fou-item">
                    <div class="ListOne-one-fou-item-content">
                        <span class="ListOne-one-fou-item-name">冰冰</span>
                        <span class="ListOne-one-fou-item-eng">Taobao Operations Director</span>
                        <span class="ListOne-one-fou-item-des">淘宝运营总监</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class='ListOne-one-fiv'>
            <ul class='ListOne-one-fiv-select'>
                <li class='ListOne-one-fiv-select-item active' @click="handelClick($event)">公司新闻</li>
                <li class='ListOne-one-fiv-select-item' @click="handelClick($event)">行业动态</li>
                <li class='ListOne-one-fiv-select-item' @click="handelClick($event)">学院动态</li>
            </ul>
            <div class='ListOne-one-fiv-content'>
                <ul class='ListOne-one-fiv-title'>
                    <li class='ListOne-one-fiv-title-img'><img :src='this.new[this.index].imgUrl' width=100% alt=""></li>
                    <li class='ListOne-one-fiv-title-content'>
                        <h2 class='ListOne-one-fiv-title-content-title'>{{this.new[this.index].newTitle}}</h2>
                        <p class='ListOne-one-fiv-title-content-content'>{{this.new[this.index].newContent}}</p>
                    </li>
                </ul>
                <ul class='ListOne-one-fiv-bottom'>
                    <li class="ListOne-one-five-bottom-item" v-for='(item,index) of this.new[this.index].newInt' :key ='index+"ListOne-one-five-bottom-item"'>
                        <div class='ListOne-one-five-bottom-item-time'>
                            <span class='ListOne-one-five-bottom-item-time-date'>{{item.date}}</span>
                            <span class='ListOne-one-five-bottom-item-time-ym'>{{item.yearMonth}}</span>
                        </div>
                        <div class='ListOne-one-five-bottom-item-des'>
                            <p>{{item.content}}</p>
                        </div>
                    </li>                  
                </ul>
            </div>
            <div class='ListOne-one-fiv-right'><img :src="this.new[this.index].rightUrl" width=100% alt=""></div>
        </div>
    </div>
</template>
<script>
import { setInterval, clearInterval } from 'timers';
export default {
    name: 'ListOne',
    data(){
        return{
            "imgUrl": [{
                "url": "/static/img/淘宝.png",
                "content1": "淘宝运营领域",
                "content2": "TAOBAO OPERATION FIELD"
            },{
                "url": "/static/img/抖音.png",
                "content1": "抖音短视频领域",
                "content2": "TREMOLO SHORT VIDEO FIELD"
            },{
                "url": "/static/img/ps.png",
                "content1": "艺术设计领域",
                "content2": "ART DESIGN FIELD"
            },{
                "url": "/static/img/营销.png",
                "content1": "营销行业领域",
                "content2": "MARKETING FIELD"
            },{
                "url": "/static/img/拼多多.png",
                "content1": "拼多多运营领域",
                "content2": "PINDUODUO OPERATION FIELD"
            },{
                "url": "/static/img/京东.png",
                "content1": "京东运营领域",
                "content2": "JD OPERATIONAL FIELD"
            }],
            "boxtre": [{
                "title": "28天爆款班",
                "timer": "4月1号~5月1号",
                "shichang": "31天",
                "renshu": "1594人",
                "finished": true
            },{
                "title": "521感恩回馈班",
                "timer": "5月21号~5月31号",
                "shichang": "10天",
                "renshu": "193人",
                "finished": false
            },{
                "title": "端午节钜惠班",
                "timer": "6月7号~6月30号",
                "shichang": "23天",
                "renshu": "428人",
                "finished": false
            },{
                "title": "618大促班",
                "timer": "6月18号~7月18号",
                "shichang": "30天",
                "renshu": "227人",
                "finished": false
            }],
            "new": [{
                "id": "公司新闻",
                "imgUrl": "/static/img/新闻.jpg",
                "newTitle": "抖音成在线教育者广告投放新“阵地”，流量虽好可别忘了“教育”初心",
                "newContent": "据了解，在2018年底至2019年上半年，包括数十家头部公司在内的1500多家在线教育公司，在抖音集中投放信息流广告。根据新榜学院数据，抖音的教育广告主数量月均增长达到325%，信息流广告消耗月均增长达到762%。"  ,
                "newInt": [{
                    "yearMonth": "201905",
                    "date": "11",
                    "content": "武大、华科、阿里云、腾讯云等学校或者企业大咖主力火柴契共同推动在线教育发展"  
                },{
                    "yearMonth": "201905",
                    "date": "11",
                    "content": "武大、华科、阿里云、腾讯云等学校或者企业大咖主力火柴契共同推动在线教育发展"  
                },{
                    "yearMonth": "201905",
                    "date": "11",
                    "content": "武大、华科、阿里云、腾讯云等学校或者企业大咖主力火柴契共同推动在线教育发展"  
                }],
                "rightUrl": '/static/img/新闻2.jpg'
            },{
                "id": "公司运营",
                "imgUrl": "/static/img/新闻.jpg",
                "newTitle": "抖音成在线教育者广告投放新“阵地”，流量虽好可别忘了“教育”初心",
                "newContent": "工商管理学认为企业运营模式最基本、最主要的职能是财务会计、技术、生产运营、市场营销和人力资源管理。企业的经营活动是这五大职能有机联系的一个循环往复的过程，企业为了达到自身的经营目的，必须对上述五大职能进行统筹管理，这种管理就是运营模式。"  ,
                "newInt": [{
                    "yearMonth": "201905",
                    "date": "11",
                    "content": "武大、华科、阿里云、腾讯云等学校或者企业大咖主力火柴契共同推动在线教育发展"  
                },{
                    "yearMonth": "201905",
                    "date": "11",
                    "content": "武大、华科、阿里云、腾讯云等学校或者企业大咖主力火柴契共同推动在线教育发展"  
                },{
                    "yearMonth": "201905",
                    "date": "11",
                    "content": "武大、华科、阿里云、腾讯云等学校或者企业大咖主力火柴契共同推动在线教育发展"  
                }],
                "rightUrl": '/static/img/新闻2.jpg'
            },{
                "id": "公司",
                "imgUrl": "/static/img/新闻.jpg",
                "newTitle": "抖音成在线教育者广告投放新“阵地”，流量虽好可别忘了“教育”初心",
                "newContent": "工商管理学认为企业运营模式最基本、最主要的职能是财务会计、技术、生产运营、市场营销和人力资源管理。企业的经营活动是这五大职能有机联系的一个循环往复的过程，企业为了达到自身的经营目的，必须对上述五大职能进行统筹管理，这种管理就是运营模式。"  ,
                "newInt": [{
                    "yearMonth": "201905",
                    "date": "11",
                    "content": "武大、华科、阿里云、腾讯云等学校或者企业大咖主力火柴契共同推动在线教育发展"  
                },{
                    "yearMonth": "201905",
                    "date": "11",
                    "content": "武大、华科、阿里云、腾讯云等学校或者企业大咖主力火柴契共同推动在线教育发展"  
                },{
                    "yearMonth": "201905",
                    "date": "11",
                    "content": "武大、华科、阿里云、腾讯云等学校或者企业大咖主力火柴契共同推动在线教育发展"  
                }],
                "rightUrl": '/static/img/新闻2.jpg'
            }],
            "index": 0,
            "localUrl": "https://item.taobao.com/item.htm?spm=2013.1.w4023-21635698638.4.483b32f8EGYkBz&id=600071553476",
            "timer1": '',
            "timer2": ''
        }
    },
    methods: {
        // click(el){
        //     $('.ListOne-one-two-right>li').get(el).style = 'background:linear-gradient(to right, #fac84a 1%, #fb8f20 100%);';
        //     $('.ListOne-one-two-right>li').eq(el).siblings().css({
        //         "background": '#fff'
        //     })
        //     const $item = $('.ListOne-one-two-right-item');
        //     $item.eq(el).css({
        //         "border": "6px solid rgb(254, 244, 195)"
        //     });
        //     for(let i = 0;i<$item.length;i++){
        //         if(i !== el){
        //             $item.eq(i).css({
        //                 "border": "0px"
        //             })
        //         }
        //     }
            
        // },
        handelClick(el){
            $(el.target).addClass('active').siblings().removeClass('active');
            this.index = $(el.target).index()
        }
    },
    mounted(){
        let ListIndex = 0;
        const $item1 = $('.ListOne-one-two-right-item');
        this.timer1 = setInterval(() =>{
            if(ListIndex>5){ListIndex=0;}
            $('.ListOne-one-two-right>li').eq(ListIndex).css({
                "background": "linear-gradient(to right, #fac84a 1%, #fb8f20 100%)"
            }).siblings().css({
                "background": "#fff"
            })
            $item1.eq(ListIndex).css({
               "border": "6px solid rgb(254, 244, 195)"
            })
            for(let i = 0;i<$item1.length;i++){
                if(i !== ListIndex){
                    $item1.eq(i).css({
                        "border": "0px"
                    })
                }
            }
            ListIndex ++;
        },1000);
        //教师动效
        document.body.onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if(scrollTop>1000){
                $(".ListOne-one-fou-item").css({
                    "opacity": "1",
                    "right": "0px"
                })
            }
            
        };
        let ListOneonefivIndex = 0;
        this.timer2 = setInterval(()=>{
            ListOneonefivIndex++;
            if(ListOneonefivIndex>2){
                ListOneonefivIndex = 0;
            }
            this.index = ListOneonefivIndex;
            $(".ListOne-one-fiv-select-item").eq(this.index).addClass('active').siblings().removeClass('active');
        },2000)
        const ListOneonefiv = document.getElementsByClassName("ListOne-one-fiv")[0];
        ListOneonefiv.addEventListener('mouseenter',() => {
            clearInterval(TimerListOneonefiv);
        })
        ListOneonefiv.addEventListener("mouseleave", () =>{
            ListOneonefivIndex = this.index;
            this.timer2 = setInterval(()=>{
            ListOneonefivIndex++;
            if(ListOneonefivIndex>2){
                ListOneonefivIndex = 0;
            }
            this.index = ListOneonefivIndex;
            $(".ListOne-one-fiv-select-item").eq(this.index).addClass('active').siblings().removeClass('active');
            },2000)
        })

        
    },
    destroyed(){
        clearInterval(this.timer1);
        clearInterval(this.timer2);
    }
}
</script>
<style lang="stylus" scoped>
    .ListOne
        position: relative;
        width: 100%;
        min-width: 1108px;
        .ListOne-one
            position: relative;
            margin: 0 auto;
            width: 1108px;
            height: 466px;
            .ListOne-one-left
                position: absolute;
                left: 0;
                top: -70px;
                width: 450px;
                height: 540px;
                background: url('/static/img/视频.jpg') no-repeat 0 0 /contain;
                .ListOne-one-left-vidio
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    background: url('/static/img/播放.png') no-repeat 0 0 /contain;
            .ListOne-one-right
                position: absolute;
                right: 0;
                top: 50px;
                width: 438px;
                height: 410px;
                .ListOne-one-right-title
                    line-height: 40px;
                    text-align: left;
                    font-size: 35px;
                    color: #f98f1f;
                .ListOne-one-right-title-h2
                    position: relative;
                    line-height: 40px;
                    text-align: left;
                    font-size: 35px;
                .ListOne-one-right-title-h2::after
                    position: absolute;
                    top: 48px;
                    left: 20px;
                    content: '.'
                    font-size: 0;
                    width: 0;
                    height: 40px;
                    border-left: 2px solid #bbb;
                .ListOne-one-right-bottom
                    position: absolute;
                    right: 0;
                    top: 130px;
                    cursor: pointer;
                    .ListOne-one-right-title-caption
                        font-size: 24px;
                        text-align: left;
                        line-height: 55px;
                    .ListOne-one-right-content-one,.ListOne-one-right-content-two
                        font-size: 14px;
                        line-height: 20px;
                        text-indent:2em;
                        text-align: justify;
                    .ListOne-one-right-bottom-button
                        position: absolute;
                        right: 0px;
                        bottom: -58px;
                        width: 148px;
                        height: 46px;
                        background: url('/static/img/more.png') no-repeat;
        .ListOne-one-two
            display: flex;
            margin: 70px auto;
            width: 1108px;
            height: 396px;
            .ListOne-one-two-left
                position: relative
                box-sizing: border-box;
                padding: 64px 20px;
                width: 286px;
                height: 100%;
                text-align: left;
                background: #e8e8e8;
                .ListOne-one-two-title-h1
                    font-size: 37px;
                    color: #f98f1d;
                    line-height: 50px;
                .ListOne-one-two-title-h2
                    position: relative;
                    font-size: 34px;
                    line-height: 50px;
                .ListOne-one-two-title-h2::after  
                    position: absolute; 
                    bottom: -40px;
                    left: 8px;
                    content: '.';
                    font-size: 0;
                    width: 0;
                    height: 40px;
                    border-left: 2px solid #bbb;
                .ListOne-one-two-title-h3
                    position: absolute;
                    top: 216px;
                    font-size: 28px;
                .ListOne-one-two-content
                    position: absolute;
                    padding-right: 20px;
                    bottom: 20px;
                    font-size: 14px;
                    line-height: 20px;
                    text-align: justify;
            .ListOne-one-two-right
                display: flex;
                flex-flow: row wrap;
                width: 837px;
                height: 100%;
            .ListOne-one-two-right>li
                padding: 10px;
                width: 253px;
                height: 176px;
                border: 1px solid #ccc;
                cursor: pointer
                .ListOne-one-two-right-item
                    box-sizing: border-box;
                    width: 100%;
                    height: 100%;
                    position: relative;
                    .ListOne-one-two-right-img
                        margin: 0 auto;
                        position: absolute;
                        width: 49px;
                        height: 49px;
                        left: 0;
                        right: 0;
                        top: 56px;
                    .ListOne-one-two-right-content
                        position: absolute;
                        top: 128px;
                        width: 100%;
                        color: #bbb;
                    .ListOne-one-two-right-content>p
                        text-align: center;
                        line-height: 20px;
                    .ListOne-one-two-right-content>p:nth-child(1)
                        font-size: 14px;
                    .ListOne-one-two-right-content>p:nth-child(2)
                        font-size: 12px;
        .ListOne-one-tre
            position: relative
            margin: 134px auto 0;
            width: 1108px;
            height: 270px;
            .ListOne-one-tre-box
                display: flex;
                flex-flow: row nowrap;
                width: 100%;
                height: 100%;
            .ListOne-one-tre-box-item
                position: relative;
                box-sizing: border-box;
                width: 25%;
                height: 100%;
                border-right: 1px solid #ccc;
                .ListOne-one-tre-box-item-title
                    margin: 0 auto;
                    width: 90%
                    font-size: 28px;
                    line-height: 60px;
                    border-bottom: 1px dotted #212121;
                .ListOne-one-tre-box-item-shouke
                    font-size: 16px;
                    line-height: 50px;
                .ListOne-one-tre-box-item-timer
                    font-size: 24px;
                    color: #fe8d1d;
                    font-weight: 600;
                    line-height: 40px;
                .ListOne-one-tre-box-item-shichang
                    font-size: 16px;
                    color: #212121;
                    line-height: 30px;
                .ListOne-one-tre-box-item-shichang>img
                    display: inline-block;
                    margin-right: 10px;
                .ListOne-one-tre-box-item-renshu
                    font-size: 16px;
                    color: #212121;
                    line-height: 30px;
                .ListOne-one-tre-box-item-renshu>img
                    display: inline-block;
                    margin: 0 10px;
                .ListOne-one-tre-box-item-finish,.ListOne-one-tre-box-item-begin
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: 0 auto;
                    width: 144px;
                    height: 33px;
                    font-size: 16px;
                    line-height: 33px;
                    border-radius: 20px;
                    color: #fff;
                    cursor: pointer;
                .ListOne-one-tre-box-item-finish
                    background: #9e9e9e;
                    border: 2px solid #707070;
                .ListOne-one-tre-box-item-begin
                    background: linear-gradient(to right, #fac84a 1%, #fb8f20 100%);
            .ListOne-one-tre-box>li:nth-child(4)
                border: 0;
            .ListOne-one-tre-title
                position: absolute;
                top: -64px;
                left: 0;
                right: 0;
                margin: 0 auto;
            .ListOne-one-tre-title>p
                font-size: 14px;
                line-height: 20px;
                color: #bbb;
            .ListOne-one-tre-title>h2
                font-size: 19px;
                line-height: 30px;
                color: #000;
            .ListOne-one-tre-more
                margin: 50px auto;
                width: 245px;
                height: 43px;
                font-size: 16px;
                color: #212121;
                line-height: 43px;
                text-align: center;
                font-weight: 600;
                border: 2px solid #ccc;
                cursor: pointer;
                background: url('/static/img/灰箭头.png') no-repeat 175px 16px/ 32px 10px;
        .ListOne-one-fou 
            margin: 140px auto 0;
            width: 100%;
            background: url('/static/img/背景.jpg') no-repeat 0 0 /100% 100%;
            border: 1px solid transparent;
            .ListOne-one-for-content
                display: flex;
                flex-flow: row wrap;
                margin: 0 auto;
                width: 1013px;
                height: 523px;
            .ListOne-one-for-content>li
                position: relative;
                right: 999px;
                width: 25%;
                height: 50%;
                opacity: 0;
                transition: 3s;
                .ListOne-one-fou-item-content
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 44px;
                    background: #9e9e9e;
                    opacity: 0.5;
                    .ListOne-one-fou-item-name
                        font-size: 25px;
                        color: #000;
                        line-height: 44px;
                    .ListOne-one-fou-item-eng
                        float: right;
                        margin-right: 20px;
                        margin-top: 5px;
                        font-size: 12px;
                        line-height: 20px;
                        color: #000;
                    .ListOne-one-fou-item-des
                        position: absolute;
                        bottom: 6px;
                        right: 24px;
                        display: inline-block;
                .ListOne-one-fou-item-te,.ListOne-one-fou-item-tx
                    position: relative;
                    margin-left: 20px;
                    font-size: 30px;
                    color: #e8e8e8;
                    line-height: 100px;
                    text-align: left;
                .ListOne-one-fou-item-te::after
                    position: absolute;
                    top: 76px;
                    left: 14px;
                    content: '.';
                    font-size: 0;
                    width: 0;
                    height: 50px;
                    border-left: 2px solid #ccc;
                .ListOne-one-fou-item-lest
                    padding-top: 20px;
                    font-size: 18px;
                    color: #e8e8e8;
                    line-height: 30px;
                    text-align: left;
                .ListOne-one-fou-item-dest
                    font-size: 23px;
                    color: #e8e8e8;
                    line-height: 30px;
                    text-align: left;
            .ListOne-one-for-content>li:nth-child(1)
                background: url('/static/img/子云.jpg') no-repeat 0 0 ;
            .ListOne-one-for-content>li:nth-child(3)
                background: url('/static/img/江茗.jpg') no-repeat 0 0 ;
            .ListOne-one-for-content>li:nth-child(4)
                background: url('/static/img/子沐.jpg') no-repeat 0 0 ;
            .ListOne-one-for-content>li:nth-child(6)
                background: url('/static/img/秋秋.jpg') no-repeat 0 0 ;
            .ListOne-one-for-content>li:nth-child(7)
                background: url('/static/img/娟娟.jpg') no-repeat 0 0 ;
            .ListOne-one-for-content>li:nth-child(8)
                background: url('/static/img/冰冰.jpg') no-repeat 0 0 ;
        .ListOne-one-fiv
            position: absolute;
            margin: 0 auto;
            top: 2098px;
            left: 0;
            right: 0;
            width: 1060px;
            height: 546px;
            background: #fff;
            .ListOne-one-fiv-select
                position: absolute;
                top: 24px;
                left: 54px;
                display: flex;
                flex-flow: row nowrap;
                width: 300px;
                height: 40px; 
                .ListOne-one-fiv-select-item
                    width:  100px;
                    height: 100%;
                    font-size: 16px;
                    line-height: 40px;
                    text-align: center;
                    cursor: pointer;
                .active
                    background: #fcbb7a;
                    color: #fff;
            .ListOne-one-fiv-content
                position: absolute;
                top: 104px;
                left: 52px;
                width: 576px;
                background: #f60;
                .ListOne-one-fiv-title
                    display: flex;
                    flex-flow: row nowrap;
                    position: absolute;
                    top: 0;
                    width: 100%;
                    .ListOne-one-fiv-title-img
                        width: 208px;
                        height: 141px;
                    .ListOne-one-fiv-title-content
                        flex: 1;
                        .ListOne-one-fiv-title-content-title
                            padding: 0 30px;
                            font-size: 17px;
                            color: #000;
                            line-height: 20px;
                            text-align: left;
                            font-weight: 600;
                        .ListOne-one-fiv-title-content-content
                            padding: 10px 30px 0; 
                            font-size: 13px;
                            color: #000;
                            line-height: 20px;
                            text-align: left;
                .ListOne-one-fiv-bottom
                    position: absolute;
                    top: 172px;
                    width: 100%;
                    height: 270px;
                    .ListOne-one-five-bottom-item
                        margin-top: 20px;
                        display: flex;
                        height: 70px;
                        .ListOne-one-five-bottom-item-time
                            width: 60px;
                            height: 60px;
                            border-right: 4px solid #000;
                            .ListOne-one-five-bottom-item-time-date
                                font-size: 28px;
                                line-height: 30px;
                            .ListOne-one-five-bottom-item-time-ym
                                font-size: 13px;
                                line-height: 20px;
                        .ListOne-one-five-bottom-item-des
                            flex: 1;
                            height: 70px;
                        .ListOne-one-five-bottom-item-des>p
                            box-sizing: border-box;
                            padding: 10px;
                            width: 100%;
                            height: 100%;
                            font-size: 16px;
                            text-align: left;
                            line-height: 25px;
            .ListOne-one-fiv-right
                position: absolute;
                right: 0;
                top: 0;
                width: 354px;
                height: 0;
                padding-bottom: 546px;        









</style>